<template>
  <div class="page">
		<van-nav-bar
			:fixed="true" 
			:placeholder="true"
			:border="false"
			:title="title"
			class="bar"
		></van-nav-bar>
		<!-- 内容部分 -->
		<div class="content">
			<nav class="order_nav">
				<van-tabs v-model="active" sticky @click="changeItem">
				  <van-tab v-for="index in nav_list" :key="index" :title="index">
				    <div class="order_content">
							<ul id="order_ul" ref="order_ul">
								<li 
									v-for="(item, index) in list" 
									:key="index"
								>
									<div class="t">
										<div class="shop">{{item.shop}}</div>
										<div class="status">{{order_status[item.status]}}</div>
									</div>
									<div class="c">
										<div class="l">
											<img :src="require('../assets/images/' + item.img)" alt="">
										</div>
										<div class="r">
											<div class="title">{{item.title}}</div>
											<div class="time">订单时间：{{$util.formatTime(item.time)}}</div>
											<div class="price">¥ {{item.price}}</div>
										</div>
									</div>
								</li>
							</ul>
							<van-empty v-show="no_data" description="暂无相关订单" />
						</div>
				  </van-tab>
				</van-tabs>
			</nav>
		</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
			title: '我的订单',
			active: 0,
			nav_list: ['全部订单', '代付款', '已完成', '已关闭'],
			no_data: false,
			order_list: [
				{
					id: 1,
					title: '最新款女神必备长裤粉色潮流时尚可爱款式',
					time: 1623515917,
					price: 288,
					shop: '深圳服装旗舰店',
					img: 'img3.png',
					status: 1
				},
				{
					id: 2,
					title: '最新款女神必备长裤粉色',
					time: 1623515917,
					price: 899,
					shop: '深圳服装旗舰店',
					img: 'img3.png',
					status: 2
				},
				{
					id: 3,
					title: '高档名牌包',
					time: 1623515917,
					price: 156,
					shop: 'IN CHINA国际品牌店',
					img: 'img1.png',
					status: 2
				},
				{
					id: 4,
					title: '女神单肩包迷你款可爱萌娃款式',
					time: 1623515917,
					price: 168,
					shop: 'IN CHINA国际品牌店',
					img: 'img2.png',
					status: 1
				},
				{
					id: 5,
					title: '最新款女神必备长裤粉色',
					time: 1623515917,
					price: 899,
					shop: '深圳服装旗舰店',
					img: 'img3.png',
					status: 2
				},
				{
					id: 6,
					title: '高档名牌包',
					time: 1623515917,
					price: 156,
					shop: 'IN CHINA国际品牌店',
					img: 'img1.png',
					status: 2
				},
				{
					id: 7,
					title: '女神单肩包迷你款可爱萌娃款式',
					time: 1623515917,
					price: 168,
					shop: 'IN CHINA国际品牌店',
					img: 'img2.png',
					status: 1
				}
			],
			list: [],
			order_status: ['','代付款','已完成', '已关闭']
    }
  },
  computed: {

  },
  methods: {
		changeItem(res){
			let arr = [];
			this.order_list.map((item,index) => {
				if(item.status == res){
					arr.push(item)
				}
			})
			res == 0 ? this.list = this.order_list : this.list = arr;
			if(this.list.length > 0){
				this.no_data = false;
			} else {
				this.no_data = true;
			}
		}
  },
  mounted () {
		this.list = this.order_list
  }
}
</script>

<style scoped lang="scss">
@import '~styles/theme';
	.page::v-deep .van-nav-bar{
		background-color: $theme_color;
	}
	/deep/ .van-nav-bar__title{
		color: #fff;
	}
	.order_nav::v-deep .van-tabs__nav{
		background-color: $theme_color;
		.van-tab__text--ellipsis{
			color: #fff;
		}
		.van-tabs__line{
			background-color: #fff;
			width: 34px;
		}
		.van-tab--active{
			font-weight: bold;
		}
	}
	
	.content{
		.order_content{
			ul{
				li{
					@mixin c_w {
						width: calc(100% - 25px);
						padding: 12.5px;
					}
					background-color: #fff;
					margin-bottom: 12px;
					.t{
						@include c_w;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px #eee solid;
						.status{
							font-weight: bold;
							color: #ff9800;
						}
					}
					.c{
						@include c_w;
						display: flex;
						justify-content: space-between;
						.l{
							margin-right: 12.5px;
							img{
								width: 70px;
								height: 70px;
								object-fit: cover;
								border-radius: 4px;
								display: block;
							}
						}
						.r{
							height: 70px;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: flex-start;
							.title{
								text-align: left;
								width: calc(375px - 25px - 70px - 12.5px);
								font-size: 16px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.time{
								margin-bottom: 6px;
								color: #999;
								font-size: 12px;
							}
							.price{
								font-weight: bold;
								font-size: 16px;
								color: $font_main_color;
							}
						}
					}
				}
			}
		}
	}
	
</style>
